<template>
  <div class="class statusBar">
    <van-nav-bar title="分类" />
    <div class="box">
      <van-tabs v-model="active" type="card" title-active-color="#fff" title-inactive-color="#777" color="#00bb86" @click="toggleClassBookDetails">
        <van-tab :title="item.title" v-for="(item, index) in classData" :key="index">
          <van-sidebar class="sidebar" v-model="item.index">
            <van-sidebar-item :title="item2.name" v-for="(item2, index2) in item.data" :key="index2" @click="getClassDetailsData({
              type: 'hot',
              gender: item.key,
              major: item2.name,
              start: '',
              limit: ''
            })" />
          </van-sidebar>
          <div class="content">
            <div class="item" v-for="(item, index) in ClassDetailsData" :key="index" @click="goToBookDetails(item._id)">
              <img class="img" :src="item.cover" alt="">
              <div>
                <div class="title one-text">{{item.title}}</div>
                <div class="author one-text">{{item.author}}</div>
                <div class="short-intro one-text">{{item.shortIntro}}</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Class',

    data() {
      return {
        // 分类导航栏
        active: 0,
        // 分类数据
        classData: [
          {
            title: '男生',
            data: [],
            index: 0
          },
          {
            title: '女生',
            data: [],
            index: 0
          },
          {
            title: '出版',
            data: [],
            index: 0
          },
          {
            title: '标签',
            data: [],
            index: 0
          },
        ],
        // 分类详情数据
        ClassDetailsData: []
      }
    },

    created() {
      this.getClassData();
    },

    methods: {
      // 获取分类数据
      getClassData() {
        this.axios.get('categories', {})
        .then(res => {
          // console.log('res', res);
          if(res.status === 200) {
            this.classData.forEach(v => {
              if(v.title == '男生') {
                v.data = res.data.male;
                v.key = 'male';
              }
              if(v.title == '女生') {
                v.data = res.data.female;
                v.key = 'female';
              }
              if(v.title == '出版') {
                v.data = res.data.press;
                v.key = 'press';
              }
              if(v.title == '标签') {
                v.data = res.data.picture;
                v.key = 'picture';
              }
            })
            // console.log(this.classData);
            // 默认请求
            this.getClassDetailsData({
              type: 'hot',
              gender: this.classData[0].key,
              major: this.classData[0].data[0].name,
              start: '',
              limit: ''
            })
          }
        }).catch(err => {
          console.log('err', err);
        })
      },

      // 获取分类详情数据
      getClassDetailsData(options) {
        this.axios.get('category-info', {
          params: {
            type: options.type,
            gender: options.gender,
            major: options.major,
            start: options.start,
            limit: options.limit
          }
        })
        .then(res => {
          // console.log('res', res);
          if(res.status === 200) {
            res.data.books.forEach(v => {
              v.cover = decodeURIComponent(v.cover.split('/')[2]);
            })
            this.ClassDetailsData = res.data.books;
            // console.log(this.ClassDetailsData);
          }
        })
      },

      // 点击切换分类详情
      toggleClassBookDetails() {
        this.getClassDetailsData({
          type: 'hot',
          gender: this.classData[this.active].key,
          major: this.classData[this.active].data[0].name,
          start: '',
          limit: ''
        })
      },

      // 转到书籍详情页
      goToBookDetails(bookId) {
        this.$router.push({name: 'BookDetails', query: {bookId}});
      },
    }
  }
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__title {
  color: #00bb86;
}
::v-deep .van-tabs__nav {
  margin: 0;
}
::v-deep .van-tabs--card>.van-tabs__wrap {
  height: auto;
}
::v-deep .van-tabs__nav--card {
  padding: 15px 10px;
  height: 60px;
  border: 0;
  box-sizing: border-box;
}
::v-deep .van-tabs__nav--card .van-tab {
  margin: 0 10px;
  width: 100px;
  background-color: #f7f9f6;
  border: 0;
  border-radius: 10px;
}
::v-deep .van-sidebar-item.van-sidebar-item--select {
  background-color: #f7f9f6;
}
::v-deep .van-sidebar-item {
  background-color: #fff;
}
::v-deep .van-sidebar-item--select::before {
  background-color: #00bb86;
}
.sidebar {
  position: fixed;
  top: 46px + 28px + 60px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.box {
  position: fixed;
  top: 46px + 28px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.content {
  position: fixed;
  top: 46px + 28px + 60px;
  bottom: 50px;
  left: 80px;
  right: 0;
  // padding: 20px;
  background-color: #f7f8f6;
  overflow-y: auto;
  .item {
    display: flex;
    // align-items: center;
    margin: 15px;
    // background-color: #fff;
    color: #999;
  }
  .img {
    margin-right: 15px;
    width: 60px;
    height: 80px;
    border-radius: 2px;
    box-shadow: 1px 1px 4px #aaa;
  }
  .title {
    max-width: 190px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
  }
  .author {
    margin: 5px 0;
    max-width: 190px;
  }
  .short-intro {
    max-width: 190px;
  }
}
</style>